iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

初見 Tailwindcss系列 第 4

Day 4 - Just In Time (JIT) 即時模式

  • 分享至 

  • xImage
  •  

JIT 即時模式

繼上一篇提到開啟 JIT 模式有許多優點,今天威爾豬就來淺談這個有點厲害的新即時編譯器到底有啥了不起。不過目前這項功能類似搶先試用狀態,而且 Tailwind CSS v2.1 以上版本才支援,未來應該還會陸續強化或變動,咱們靜觀其變吧。

先來看看官網說了哪些優點:
https://ithelp.ithome.com.tw/upload/images/20210904/20141250mSoORb12Dk.png

這邊寫幾個威爾豬比較有感的優點:

  • 編譯時間飛快
    在上一篇有看到編譯所需的毫秒數,一般需要 3000-8000 毫秒,如果使用 webpack 等工具則會用更多的時間來編譯,而開啟 JIT 模式,任何建構工具都可以約在 800 毫秒內完成,不得不說有開啟跟沒開啟速度真的差別太大了。

  • 開發模式和產品模式的 CSS 是一樣的
    不用擔心開發模式有哪些未使用的樣式沒清除,或是產品模式意外刪除了樣式,而且開發中的文件大小也不會異常肥大,開發時效能並不會和正式上線區別很大。

  • 可隨心所欲使用任何狀態變化模式 (variant)
    以前版本因為檔案大小的考量,並非所有的狀態變化模式都預設在功能中,要使用 activedisabledhoverfocus 等狀態變化模式,就必須到 tailwind.config.js 裡進行配置,現在只要開啟 JIT 模式,隨便用啦,都不用再次配置。

    原則上官方建議讓 tailwind.config.js 保持的越小越好,並且僅寫入想客製化的部分就好。但如果有同學想看 Tailwind 完整的預設設定檔,可以在終端機輸入指令:npx tailwindcss init --full (記得先備份好,不然可能會把你的設定檔覆蓋掉)。

    我們可以這樣寫狀態變化模式:

    <button class="disabled:opacity-50">我是按鈕</button>
    

    也可以這樣堆疊狀態變化模式:

    <button class="md:disabled:focus:hover:opacity-50">我是按鈕</button>
    
  • 無需自定義 CSS 即可生成任意樣式
    這也是威爾豬很愛的功能之一,完全直覺,有時設計稿會出現奇怪的 px 數值 (撇除設計師或軟體手誤),是無法用定義的倍數設定來代替,就必須在 CSS 另外寫入,例如:margin: 23px;,現在只要在 HTML 的標籤使用 [任意數值] 設定 class 名稱就可以了,例如: m-[23px],是不是很神奇。

    這功能雖然方便,但不要亂用,除了會讓原始碼看起來很噁心之外,還會讓 CSS 檔案變大,盡量還是使用 Utilities 的方式來撰寫,不然就失去 Tailwind 原本的用意了。

    我們可以這樣設定圖片大小:

    <img class="w-[598px] h-[742px]" src="...">
    

    也可以設定位置:

    <img class="absolute top-[-38px] left-[47px]" src="...">
    

    甚至連顏色也可以設定:

    <p class="text-[#FED439]">Hello Tailwind<p>
    

    目前 [任意數值] 也是有寫法限制

    ❌ 不能使用 JS ES6 模版字符串連接:

    <div className={`mt-[${size === 'lg' ? '45px' : '20px' }]`}></div>
    

    ❌ 不能使用 Vue 之類動態值計算:

    <div class="bg-[{{ myColor }}]"></div>
    

    ❌ 不能在中間使用空白:

    <div class="h-[calc(1000px - 5rem)]">...</div>
    

最後,啟用 JIT 模式非常簡單,就只要在 tailwind.config.js 文件中設定 mode: 'jit' 就好了,不過記得一定要搭配 perge 中的路徑做編譯使用,不然寫的 Tailwind 沒有編譯出來,就完全無效了。好了~咱們明天見。


上一篇
Day 3 - 試試 Tailwind CLI
下一篇
Day 5 - 斷點設定
系列文
初見 Tailwindcss30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言